.app {
    width: 100vw;
    height: 100vh;
    text-align: center;
    /* background-color: black; */
    display: flex;
    justify-content: center;
}

.cover-icon {
    background-image: url('/src/assets/cover.png');
    background-size: 300px 300px;
    width: 300px;
    height: 300px;
    margin-top: 20vh;
}

.start-button {
    color: white;
    font-style: italic;
    margin-top: 30vh;
    animation: highlight 3s infinite;
    -webkit-animation: highlight 3s infinite;
}

.start-button:hover {
    cursor: pointer
}

@keyframes highlight {
    0% {
        opacity: 0;
    }

    5% {
        opacity: 0.125;
    }

    10% {
        opacity: 0.25;
    }

    15% {
        opacity: 0.375;
    }


    20% {
        opacity: 0.5;
    }

    25% {
        opacity: 0.625;
    }


    30% {
        opacity: 0.75;
    }

    35% {
        opacity: 0.875;
    }


    40% {
        opacity: 1;
    }

    60% {
        opacity: 1;
    }

    65% {
        opacity: 0.875;
    }


    70% {
        opacity: 0.75;
    }

    75% {
        opacity: 0.625;
    }


    80% {
        opacity: 0.5;
    }

    85% {
        opacity: 0.375;
    }


    90% {
        opacity: 0.25;
    }

    95% {
        opacity: 0.125;
    }

    100% {
        opacity: 0;
    }
}

@-webkit-keyframes highlight {
    0% {
        opacity: 0;
    }

    5% {
        opacity: 0.125;
    }

    10% {
        opacity: 0.25;
    }

    15% {
        opacity: 0.375;
    }


    20% {
        opacity: 0.5;
    }

    25% {
        opacity: 0.625;
    }


    30% {
        opacity: 0.75;
    }

    35% {
        opacity: 0.875;
    }


    40% {
        opacity: 1;
    }

    60% {
        opacity: 1;
    }

    65% {
        opacity: 0.875;
    }


    70% {
        opacity: 0.75;
    }

    75% {
        opacity: 0.625;
    }


    80% {
        opacity: 0.5;
    }

    85% {
        opacity: 0.375;
    }


    90% {
        opacity: 0.25;
    }

    95% {
        opacity: 0.125;
    }

    100% {
        opacity: 0;
    }
}